<template>
  <!-- 头部提交表单 -->
  <el-row class="top">
    <el-button type="primary" @click="handelSave">保存</el-button>
    <el-button @click="handelBack">返回</el-button>
  </el-row>

  <!-- 分割线 -->
  <el-divider />

  <!-- 表单数据 -->

  <el-form
    ref="supFormRef"
    :inline="true"
    :model="supForm"
    :rules="rules"
    label-width="120px"
    :size="formSize"
    status-icon
  >
    <el-form-item label="供应商名称" prop="name">
      <el-input v-model="supForm.name" style="width: 250px" />
    </el-form-item>
    <el-form-item label="采购优先" prop="level">
      <el-select v-model="priority.value" style="width: 200px">
        <el-option
          v-for="item in priority.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="负责人" prop="director">
      <el-input v-model="supForm.director" style="width: 240px" />
    </el-form-item>
    <el-form-item label="联系人" prop="contacts">
      <el-input v-model="supForm.contacts" style="width: 240px" />
    </el-form-item>
    <el-form-item label="联系电话" prop="phone">
      <el-input v-model="supForm.phone" style="width: 240px" />
    </el-form-item>
    <el-form-item label="社会信用代码" prop="code">
      <el-input v-model="supForm.code" style="width: 240px" />
    </el-form-item>
    <el-form-item label="成立日期" prop="establishment">
      <el-input v-model="supForm.establishment" style="width: 240px" />
    </el-form-item>
    <el-form-item label="注册资金" prop="amount">
      <el-input v-model="supForm.amount" style="width: 240px" />
    </el-form-item>
    <el-form-item label="开户银行" prop="bank">
      <el-select v-model="priority.bank" style="width: 240px">
        <el-option
          v-for="item in priority.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="产品类型" prop="type">
      <el-select v-model="priority.type" style="width: 240px">
        <el-option
          v-for="item in priority.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="设备状态" prop="devices_state">
      <el-select v-model="priority.devices_state" style="width: 240px">
        <el-option
          v-for="item in priority.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="商品产地" prop="production">
      <el-select v-model="priority.production" style="width: 240px">
        <el-option
          v-for="item in priority.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="开票地址" prop="ticket_address">
      <el-input v-model="supForm.ticket_address" style="width: 640px" />
    </el-form-item>
    <el-form-item label="付款条件" prop="pay_condition">
      <el-input v-model="supForm.pay_condition" style="width: 600px" />
    </el-form-item>
    <el-form-item class="contract" label="合同" prop="contract">
      <el-input
        v-model="filename"
        placeholder="选择合同"
        style="width: 250px"
      />
      <el-upload
        :show-file-list="false"
        action="http://www.shuiyue.info:21000/file/upload/public/img"
        :on-change="handleChange"
        :accept="'image/*'"
      >
        <el-button
          type="primary"
          style="margin-bottom: 9px"
          size="mini"
          title="上传文件"
          >上传</el-button
        >
      </el-upload>
    </el-form-item>
    <el-form-item label="备注">
      <el-input type="textarea" placeholder="备注" style="width: 1000px" />
    </el-form-item>
  </el-form>
</template>

<script>
import { supplierAdd } from "@/apis/Purchase/supplier";

export default {
  data() {
    return {
      curFileList: [],
      filename: "",
      supForm: {},
      priority: {
        options: [
          {
            value: "1",
            label: "最优",
          },
          {
            value: "2",
            label: "优等",
          },
          {
            value: "3",
            label: "良好",
          },
          {
            value: "4",
            label: "一般",
          },
        ],
        value: " ",
      },
      // rules: {
      //   name: [
      //     {
      //       required: true,
      //       message: "此项不能为空！",
      //       trigger: "blur",
      //     },
      //   ],
      //   contract: [
      //     {
      //       required: true,
      //       message: "此项不能为空！",
      //       trigger: "blur",
      //     },
      //   ],
      //   level: [
      //     {
      //       required: true,
      //       message: "此项不能为空！",
      //       trigger: "blur",
      //     },
      //   ],
      //   ticket_address: [
      //     {
      //       required: true,
      //       message: "此项不能为空！",
      //       trigger: "blur",
      //     },
      //   ],
      //   pay_condition: [
      //     {
      //       required: true,
      //       message: "此项不能为空！",
      //       trigger: "blur",
      //     },
      //   ],
      //   director: [
      //     {
      //       required: true,
      //       message: "此项不能为空！",
      //       trigger: "blur",
      //     },
      //   ],
      //   contacts: [
      //     {
      //       required: true,
      //       message: "此项不能为空！",
      //       trigger: "blur",
      //     },
      //   ],
      //   phone: [
      //     {
      //       required: true,
      //       message: "此项不能为空！",
      //       trigger: "blur",
      //     },
      //   ],
      //   code: [
      //     {
      //       required: true,
      //       message: "此项不能为空！",
      //       trigger: "blur",
      //     },
      //   ],
      //   establishment: [
      //     {
      //       required: true,
      //       message: "此项不能为空！",
      //       trigger: "blur",
      //     },
      //   ],
      //   amount: [
      //     {
      //       required: true,
      //       message: "此项不能为空！",
      //       trigger: "blur",
      //     },
      //   ],
      //   bank: [
      //     {
      //       required: true,
      //       message: "此项不能为空！",
      //       trigger: "blur",
      //     },
      //   ],
      //   type: [
      //     {
      //       required: true,
      //       message: "此项不能为空！",
      //       trigger: "blur",
      //     },
      //   ],
      //   devices_state: [
      //     {
      //       required: true,
      //       message: "此项不能为空！",
      //       trigger: "blur",
      //     },
      //   ],
      //   production: [
      //     {
      //       required: true,
      //       message: "此项不能为空！",
      //       trigger: "blur",
      //     },
      //   ],
      // },
    };
  },
  methods: {
    async handelSave(name) {
      try {
        const result = await this.$refs.supFormRef.validate();
        if (result) {
          let formData = new FormData();
          formData.append("file", this.curFileList[0]);
          const supInfo = await supplierAdd({ name, formData });
          console.log(supInfo);
        }
      } catch (error) {
        console.log("error:", error);
      }
    },
    // eslint-disable-next-line no-unused-vars
    handleChange(file, fileList) {
      this.filename = file.name;
      this.curFileList = [];
      this.curFileList.push(file);
    },

    //返回
    handelBack() {
      this.$router.push("/purchase/supplier/list");
    },
  },
};
</script>

<style lang="less" scoped>
.el-row {
  float: right;
  margin-top: 9px;
  .el-button {
    margin: 0 10px;
  }
}
.el-divider {
  margin-top: 50px;
}
.el-form {
  .el-form-item {
    margin-right: 15px;
    .el-button {
      color: #fff;
    }
  }
}
.contract {
  display: flex;
  align-items: center;
  .el-button {
    margin-top: 10px;
    padding: 0 5px;
  }
}
</style>
